<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城详情</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/shop_style.css" />
    <!-- <link rel="stylesheet" href="css/jquery.fullPage.css"> -->

    <script src="js/jquery-1.8.3.min.js"></script>
    
</head>
<body>
<div class="content-box">
    <div class="head">
        <div class="visual-box">
            <div class="head-left clearfloat">
                <div class="head-logo">
                    <img src="img/logo.png" />
                </div>
                <div class="head-tel">
                    蓝光优居热线
                    <span>
                    400-8888-116
                </span>
                </div>

                <ul class="head-right">
                    <li class="click-login">
                        <i class="icon-1"></i>登录
                        <label></label>
                    </li>
                    <li class="click-register">
                        <i class="icon-2"></i>注册
                        <label></label>
                    </li>
                    <li>
                        <i class="icon-3"></i>设计师登录
                        <label></label>
                    </li>
                    <li class="top-qr-li">
                        <i class="icon-4"></i>微信公众号
                        <label></label>
                        <div class="top-qr">
                            <div class="top-qr-box">
                                <img src="img/qr.jpg" />
                                <p>
                                    悠生活U-life
                                </p>
                                <i></i>
                            </div>
                        </div>
                    </li>
                    <li>
                        <i class="icon-5"></i>样板间地图
                    </li>
                </ul>
            </div>
        </div>
        <div class="nav-bg">
            <div class="visual-box">
                <ul class="nav" id="nav">
                    <li>
                        <a href="index.html">首页</a>
                    </li>
                    <li>
                        <!--<a href="customized.html">全屋定制</a>-->
                        <a href="customized.html">全屋定制</a>
                    </li>
                    <li>
                        <a href="sheji.html">设计+</a>
                    </li>
                    <li>
                        <a href="fengshui_info_list.htm">居家风水</a>
                    </li>
                    <li>
                        <a href="#">家居金融</a>
                    </li>
                    <li>
                        <a href="comment.html">优居热评</a>
                    </li>
                    <li>
                        <a href="#">品质检测</a>
                    </li>
                    <li>
                        <a href="shop_index.html" class="active">悠生活商城</a>
                    </li>
                    <li>
                        <a href="complaint.html">红邮箱投诉</a>
                    </li>
                    <li class="nav-last-list">
                        已服务<span>012354</span>位业主
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="shop_body_box">
        <!-- shop_airticle start -->
        <div class="shop_airticle_mbxnav">
            全部商品 > 客餐厅 > 沙发

        </div>
        <div class="shop_airticle_box1">
            <div class="shop_ab1_left">
                <ul class="shop_ab1_left_imglist">
                    <li class="active" bigsrc="img/shop/shop_airticle_bigimg.jpg"><img src="img/shop/shop_imglist1.jpg" /></li>
                    <li bigsrc="img/shop/shop_imglist2.jpg"><img src="img/shop/shop_imglist2.jpg" /></li>
                    <li bigsrc="img/shop/shop_imglist2.jpg"><img src="img/shop/shop_imglist2.jpg" /></li>
                </ul>
                <div class="shop_ab1_left_bigimg">
                    <!--<img src="img/shop/shop_airticle_bigimg.jpg" />-->
                    <div class="small-box" id="smallBox">
                        <img src="img/shop/shop_airticle_bigimg.jpg"/>
                        <div class="tool" id="tool"></div>
                    </div>
                    <div class="big-box" id="bigBox">
                        <img src="img/shop/shop_airticle_bigimg.jpg" id="bigImg" />
                    </div>
                    <div class="shop_airticle_bigimg_showbig">鼠标移至图上可放大图片</div>
                </div>
            </div>
            <div class="shop_ab1_right">
                <h3 class="shop_airticle_title">百伽Best selling 美亚同款布艺沙发单人客厅休闲北欧沙发椅子亚同款布艺沙发单人美亚同款客厅休闲北欧56589三色可选（下单后45天内发货）</h3>
                <div class="shop_airtile_tag">百伽Best selling</div>
                <div class="shop_airticle_sj">售价</div>
                <div class="shop_airticle_price">￥988</div>
                <ul class="shop_airticle_breff">
                    <li>三色可选，亚麻质感</li>
                    <li>手动调节，可躺可坐。110°-160°自由调控</li>
                    <li>非无包坻区需自费送装费，详询客服；此商品发票由悠生活开具，不再配送包裹内</li>
                    <li>取消订单请联系：400-8888-116；工作时间：上午8:30-下午18:00</li>
                </ul>
                <button class="shop_airticle_booking bt-hover">加入订单</button>
                <div class="shop_airticle_send">销售配送：由悠生活直接销售和发货</div>
            </div>
        </div>
        <div class="shop_airticle_box2">
            <div class="shop_airticle_box2_title">商品详情</div>
            <div class="shop_airticle_box2_details">采用环保布料，弧形时尚设计，创意有个性，坚固耐用，适合客厅，酒店会所咖啡厅和卧室使用主框架为实木，板材为环保的P2标准，甲醛释放量接近于零，木脚为桦木，牢固耐用，采用的油漆为环保的华伦漆采用美国加州标准的防火海绵，高密度高弹性的海绵更加舒适和耐用品牌介绍:百伽是美国Noble House公司在中国创立的美式家具品牌,诞生于上世纪90年代的Noble House通过20多年的经营,在美国创立了3个知名家具品牌,仅在线年销售额就已经突破3千万美金,Noble House的产品在美国获得了广大消费者的认可。如今Noble House携百伽品牌进入中国市场,立志于把安全、环保、舒适的纯正美式家具引入国内,让消费者能用实惠的价格享受到高品质的美式生活生产、检验标准:
                <p>1.人造板材（夹板、密度板）:符合美国加州空气资源委员会（CARB）的P2标准</p>
                <p>2.海绵:采用符合美国CAFR117标准的防火海绵</p>
                <p>3.面料、油漆、底部无纺布的铅含量:符合美国消费品安全改进法案CPSIA的标准</p>
                <p>4.坐具安全性、强度、耐久性:符合欧洲家用座椅标准EN 12520:2010标准</p>
            </div>
            <div class="shop_airticle_box2_imgs">
                <img src="img/shop/shop_airticle_imgshow.jpg" />
            </div>
        </div>
        <div class="shop_botton_line"></div>
        <!-- shop_airticle end -->
    </div>

    <div class="footer">
        <div class="visual-box clearfloat">
            <div class="footer-left clearfloat">
                <div class="footer-left-list">
                    <dl>
                        <dt>
                            品牌实力
                        </dt>
                        <dd>
                            <a href="#">品牌介绍</a>
                        </dd>
                        <dd>
                            <a href="#">企业文化</a>
                        </dd>
                        <dd>
                            <a href="#">全国布局</a>
                        </dd>
                    </dl>
                </div>
                <div class="footer-left-list">
                    <dl>
                        <dt>
                            V8生活家
                        </dt>
                        <dd>
                            <a href="#">硬包装</a>
                        </dd>
                        <dd>
                            <a href="#">软包装</a>
                        </dd>
                        <dd>
                            <a href="#">智能家居</a>
                        </dd>
                        <dd>
                            <a href="#">家庭园艺</a>
                        </dd>
                    </dl>
                </div>
                <div class="footer-left-list">
                    <dl>
                        <dt>
                            产品服务
                        </dt>
                        <dd>
                            <a href="#">高端定制服务</a>
                        </dd>
                        <dd>
                            <a href="#">服务理念</a>
                        </dd>
                        <dd>
                            <a href="#">设计名家</a>
                        </dd>
                        <dd>
                            <a href="#">预定装修</a>
                        </dd>
                    </dl>
                </div>
                <div class="footer-left-list">
                    <dl>
                        <dt>
                            产品优势
                        </dt>
                        <dd>
                            <a href="#">六大优势</a>
                        </dd>
                        <dd>
                            <a href="#">品牌合作伙伴</a>
                        </dd>

                    </dl>
                </div>
                <div class="footer-left-list">
                    <dl>
                        <dt>
                            联系我们
                        </dt>
                        <dd>
                            <a href="#">联系方式</a>
                        </dd>
                        <dd>
                            <a href="#">在线咨询</a>
                        </dd>

                    </dl>
                </div>
            </div>
            <div class="footer-right">
                <div class="service-list">
                    <p>
                        全国客户服务热线
                    </p>
                    <div>
                        028-8780-1675
                    </div>
                    <i></i>
                </div>
                <div class="email">
                    邮编：611731
                </div>
                <div class="email">
                    地址：中国    成都    高新西区    新创路2号附10号
                </div>
                <div class="copyright">
                    ©2017 WWW.BRC-BEEI.COM ALL RIGHTS RESERVED
                </div>
                <div class="qr-box">
                    <img src="img/qr.jpg" />
                    <p>
                        关注蓝光官方微信
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- footer end -->

<!-- login start -->
<div class="login">
    <div class="login-box">
        <i class="cols"></i>
        <h2>
            登录
            <a href="#" class="click-register lick-hover">
                注册
            </a>
        </h2>
        <div class="login-input">
            <input type="text" name="" placeholder="请输入账号" />
            <i class="icon-user" yClass="icon-user-1"></i>
        </div>
        <div class="login-input">
            <input type="password" name="" placeholder="请输入密码" />
            <i class="icon-pwsd" yClass="icon-pwsd-1"></i>
        </div>
        <p class="error-box">
            <i></i>账号或密码错误
            <a href="#">
                忘记密码？
            </a>
        </p>

        <button class="login-bt">
            登录
        </button>
    </div>
</div>

<div class="login register">
    <div class="login-box">
        <i class="cols"></i>
        <h2>
            注册
            <a href="#" class="click-login lick-hover">
                登录
            </a>
        </h2>
        <div class="login-input warning">
            <input type="text" name="" placeholder="请输入手机号" value="13856458978" />
            <i class="icon-user" yClass="icon-user-1"></i>
        </div>
        <div class="login-input">
            <input type="password" name="" placeholder="请设置密码" />
            <i class="icon-pwsd" yClass="icon-pwsd-1"></i>
        </div>
        <div class="login-input phone-number">
            <input type="text" name="" placeholder="请输入手机验证码" value="" />
            <i class="icon-number" yClass="icon-number-1"></i>
            <button>
                发送验证码
            </button>
        </div>
        <p class="error-box">
            <i></i>账号或密码错误
        </p>
        <p class="agreement">
            <i><input type="checkbox" name="" checked /></i>已阅读并同意<a href="#" target="_blank">《蓝光优居用户使用协议》</a>
        </p>
        <button class="login-bt">
            注册
        </button>
    </div>
</div>
</body>

<script src="js/app.js"></script>
<script>
    /*
     第一步：当页面加载完后，获取所要操作的节点对象。
     第二步：为smallBox添加一个鼠标浮动事件
     当鼠标浮动到smallBox可视区域的时候，显示出小黄盒子tool
     和右边的大盒子（小黄盒子的放大版）bigBox
     添加active

     为smallBox添加一个鼠标离开事件
     隐藏小黄盒子和右边的大盒子
     去掉active

     第三步：为smallBox添加一个鼠标移动事件
     小黄盒子tool要跟着鼠标的坐标移动
     右边的大盒子里的图片也跟着指定的比例移动
     */
    var smallBox = document.getElementById("smallBox");//小盒子
    var tool = document.getElementById("tool");//小盒子中的黄色区域
    var bigBox = document.getElementById("bigBox");//大盒子
    var bigImg = document.getElementById("bigImg");//放大的图片
    //鼠标进入小盒子区域内，显示黄色区域和大盒子
    smallBox.onmouseenter = function(){
        tool.className = "tool active";
        bigBox.className = "big-box active";
    }
    //鼠标离开小盒子区域，不显示黄色区域和大盒子
    smallBox.onmouseleave = function(){
        tool.className = "tool";
        bigBox.className = "big-box";
    }
    //鼠标在小盒子内移动
    smallBox.onmousemove = function(e){
        var _e = window.event||e;//事件对象
        var bodyWidth = document.body.clientWidth;
        if(bodyWidth < 1200){
            bodyWidth = _e.clientX;
        }else {
            bodyWidth = _e.clientX-(bodyWidth-1200)/2;
        }
        var scrollTop=0;
        if(document.documentElement&&document.documentElement.scrollTop){
            scrollTop=document.documentElement.scrollTop;
        }else if(document.body){
            scrollTop=document.body.scrollTop;
        }
        var bodyHeight = _e.clientY+scrollTop;
        var x = bodyWidth-this.offsetLeft-tool.offsetWidth*1.2;//事件对象在小盒子内的横向偏移量
        var y = bodyHeight-this.offsetTop-tool.offsetHeight*2.45;//竖向偏移量
        if(x<0){
            x = 0;//当左偏移出小盒子时，设为0
        }
        if(y<0){
            y = 0;//当上偏移出小盒子时，设为0
        }
        if(x>this.offsetWidth-tool.offsetWidth){
            x = this.offsetWidth-tool.offsetWidth;//当右偏移出小盒子时，设为小盒子的宽度-黄色放大区域宽度
        }
        if(y>this.offsetHeight-tool.offsetHeight){
            y = this.offsetHeight-tool.offsetHeight;//当下偏移出小盒子时，设为小盒子的高度-黄色放大区域高度
        }
        tool.style.left = x + "px";//黄色放大区域距离小盒子左偏距
        tool.style.top = y + "px";//黄色放大区域距离小盒子上偏距
        bigImg.style.left = -x*1 + "px";//放大图片移动方向相反，偏移距离加倍
        bigImg.style.top = -y*1 + "px";
    }
</script>
</html>